{% load static %}
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8"/>
    <title>我的工作生活分享</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container pt-5">
    <div class="row">
        <div class="col-6 left-box">
            <div class="flex-container border p-3 questionnaire" id="questionnaire_form">
                {% include 'qu_form.html' %}
            </div>
        </div>
        <div class="col-6 border p-3 right-box">
            <form name="form_title">
                <div class="mb-3 mt-3">
                    <label for="questionnaire_name" class="form-label">标题:</label>
                    <input type="text" class="form-control" id="questionnaire_name" placeholder="标题"
                           name="questionnaire_name">
                    <button id="title_submit" type="button" class="btn btn-primary mt-3">确定标题</button>
                </div>
            </form>
            <form name="qu_form">
                <div class="mb-3">
                    <label for="question_text" class="form-label">问题:</label>
                    <input type="text" class="form-control" id="question_text" placeholder="问题" name="question_text"
                           required>
                </div>
                <div class="mb-3">
                    <button type="button" id="add_qu_1" class="btn btn-primary">添加为必填问题</button>
                    <button type="button" id="add_qu_0" class="btn btn-primary">添加为非必填问题</button>
                </div>
                <hr/>
                <div class="mb-3 d-flex justify-content-center">
                    <div class="m-2">
                        <button type="button" id="downloadBtn" class="btn btn-success">下载表格</button>
                    </div>
                    <div class="m-2">
                        <button type="button" id="delBtn" class="btn btn-danger">清除表格缓存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

<script>
    // 标题修改
    const TitleSumbit = document.getElementById("title_submit");
    const QuestionnaireForm = document.getElementById("questionnaire_form");
    TitleSumbit.onclick = function () {
        var formData = new FormData(form_title);
        fetch(
            "/questionaire/",
            {
                method: 'POST',
                body: formData,
            }
        ).then(res => res.text()).then(html => {
            QuestionnaireForm.innerHTML = html;
        })
    }

    // 表单问题添加
    const addQuestionBtn1 = document.getElementById("add_qu_1");
    const addQuestionBtn0 = document.getElementById("add_qu_0");


    addQuestionBtn1.onclick = function () {
        addQuestionFun(true);
    }
    addQuestionBtn0.onclick = function () {
        addQuestionFun(false);
    }
    // addQuestionBtn1.addEventListener("click", addQuestionFun(1));
    // addQuestionBtn0.addEventListener("click", addQuestionFun(0));

    function addQuestionFun(type) {
        let formData = new FormData(qu_form);
        formData.append("questionnaire", 1)
        formData.append("required_question", type)
        fetch(
            "/questionaire/question/",
            {
                method: 'POST',
                body: formData,
            }
        ).then(res => res.text()).then(html => {
            QuestionnaireForm.innerHTML = html;
        })
    }

    // 清除表单缓存
    const delQuestionnaireBtn = document.getElementById("delBtn");
    delQuestionnaireBtn.onclick = function () {
        fetch(
            "/questionaire/",
            {
                method: 'DELETE',
            }
        ).then(res => res.text()).then(html => {
            QuestionnaireForm.innerHTML = html;
        })
    }

    // 下载
    const downloadBtn = document.getElementById("downloadBtn")
    downloadBtn.onclick = function () {
        window.location.href = '/questionaire/download/'
    }

</script>

</body>
</html>